<template>
  <view class="container">
    <!-- 导航栏 -->
    <tui-navigation-bar title="推荐套餐"></tui-navigation-bar>

    <!-- 套餐 -->
    <section class="goods-container">
      <view class="goods-item-box">
        <!-- 商品图片 -->
        <view class="goods-item-img">
          <image v-if="selectMealDetail.img" class="width-100 height-100" :src="selectMealDetail.img" mode="aspectFill"></image>
        </view>

        <!-- 商品内容 -->
        <view class="goods-item-content">
          <!-- 标题 -->
          <view class="goods-item-title"> {{ selectMealDetail.name }}</view>

          <view class="is-flex justify-between items-center flex-wrap">
            <!-- 商品价格 -->
            <view class="goods-item-price text-price mt-5 mr-5"> {{ selectMealDetail.Price }}</view>

            <!-- 点击添加 选规格 / - num + -->
            <view class="choose-box mt-10">
              <!-- 多选 -->
              <view class="multi-select" @click="showForm(currentMeal, currentMeal.goodsid, manualAdd)">
                <text>选规格</text>

                <view v-if="this.$format(currentMeal, 'selectNumber')" class="select-number">{{ this.$format(currentMeal, 'selectNumber') }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </section>

    <section class="detail-container">
      <view class="title">套餐明细</view>

      <view class="content">
        <view class="desc">{{ this.$format(selectMealDetail, 'detail', '') }}</view>
      </view>
    </section>

    <section class="detail-container">
      <view class="title">已选配送列表</view>

      <view class="content">
        <block v-if="currentMealForm">
          <view v-for="item in currentMealForm" :key="item.id" class="select-good">
            <view>{{ item.goodsname }}</view>
            <view> x{{ item.selectNumber }}</view>
          </view>
        </block>
        <block v-else>暂无</block>
      </view>
    </section>

    <!-- 底部统计 + 支付栏 -->
    <view class="foot-height"></view>
    <view class="foot">
      <view class="foot-left">
        <view class="price-box">
          <text>合计 ： </text>
          <text class="text-price font-weight-bold">{{ totalPrice }}</text>
        </view>
      </view>
      <view class="foot-right" @click="scanToShowForm()">
        <text>加入购物车</text>
      </view>
    </view>

    <!-- 套餐 -->
    <ModalMealForm
      ref="mealFormModal"
      :selectMeal="currentMeal"
      :selectMealForm="selectMealFormStatistics.originMealForm"
      :selectMealFormGoods="selectMealFormStatistics.goods"
      :selectMealFormGroups="selectMealFormStatistics.groups"
      @mealFormModalClose="mealFormModalClose"
      @submit="submit"
    ></ModalMealForm>

    <my-loading ref="loading"></my-loading>

    <!-- 选择房台号组件 -->
    <modal-scan ref="scanModal" @success="addToCart"></modal-scan>
  </view>
</template>

<script>
import ModalMealForm from '@/pages/shop/components/modal-meal-form/modal-meal-form.vue'
import common from '@/pages/shop/mixins/common'
import addGood from '@/pages/shop/mixins/add-good'
export default {
  mixins: [common, addGood],
  components: {
    ModalMealForm
  },
  data() {
    return {
      /**
       *  决定点击套餐配送确认按钮的时候，是直接调用 addGoodsChange 添加到缓存中，还是主动触发添加
       *  1. true : 需要手动调用 addGoodsChange 方法才能完成添加到购物车的操作
       *  2. false ： 不需要手动调用 addGoodsChange ， 会直接完成添加操作
       */
      manualAdd: true,
      // 选中商品 - 套餐配送详情列表
      selectMealDetail: null,

      // 主套餐选中数量
      selectNumber: 0
    }
  },
  computed: {
    totalPrice() {
      const selectNumber = this.$format(this.currentMeal, 'selectNumber', 0)
      const price = this.$format(this.currentMeal, 'Price', 0)
      if (!selectNumber) return 0
      if (!price) return 0
      return this.$utils.mathMultiply(Number(selectNumber), Number(price))
    },
    currentMealForm() {
      return this.$format(this.currentMeal, 'mealForm')
    }
  },
  onLoad(options) {
    const encdoeOptions = this.$encode(options)
    this.currentMeal = this.$format(encdoeOptions, 'data')
  },
  onShow() {
    setTimeout(() => {
      this.getTjMealDetail()
    })
  },
  methods: {
    submit(mealSelectNumber, submitMeal) {
      this.mealSelectNumber = mealSelectNumber
      this.currentMeal = submitMeal
    },
    addToCart() {
      this.currentMeal.set = 1
      this.addGoodsChange(this.currentMeal.selectNumber, this.currentMeal)

      if (this.currentMeal.selectNumber > 0) {
        this.$open('/shop/shop', 'rt')
      } else {
        this.$msg('text', '请先选择套餐数量')
      }
    },
    scanToShowForm() {
      // this.showForm(this.currentMeal, this.currentMeal.goodsid, this.manualAdd)

      if (this.currentMeal.selectNumber > 0) {
        this.$refs.scanModal.open()
      } else {
        this.$msg('text', '请先选择套餐数量')
      }
    },
    // 获取推荐套餐详情
    getTjMealDetail() {
      const currentMeal = this.currentMeal
      if (this.$isEmpty(currentMeal)) return uni.navigateBack()

      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return reject()
      Object.assign(baseParam, { tjmealid: currentMeal.id })
      console.param('获取推荐套餐详情', baseParam)
      this.$refs.loading.open()
      this.$api
        .getTjMealDetail(baseParam)
        .then(res => {
          console.res('获取推荐套餐详情', res)
          this.selectMealDetail = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('获取推荐套餐详情', err)
          this.errMsg(err, '获取推荐套餐详情失败')
        })
        .finally(() => {
          this.$refs.loading.close()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  margin-bottom: 15px;
  border-radius: 5px;
  background: $color-primary-modal-bg;
  color: $color-primary-grey-text;
}

// 商品容器
.goods-container {
  padding: 15px;
  .goods-item-box {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    // margin-top: 15px;
    @include border-bottom;

    &:last-child {
      border-bottom: 0;
    }

    .goods-item-img {
      background: $imgBg;
      flex: 0 0 70px;
      height: 70px;
      border-radius: 4px;
      overflow: auto;
    }

    .goods-item-content {
      flex: 1;
      display: flex;
      align-content: space-between;
      flex-direction: column;
      position: relative;
      padding-left: 10px;
      // padding-top: 5px;

      .goods-item-title {
        color: $color-primary-grey-text;
        margin-bottom: 5px;
      }

      .goods-item-price {
        font-weight: bold;
        display: flex;
        align-items: center;
        color: $gold;
        font-size: $font-size-base;
      }
    }

    // 多选
    .multi-select {
      position: relative;
      margin-top: 2px;
      padding: 3px 10px;
      font-size: $font-size-xs;
      text-align: center;
      border: 1px solid $gold;
      color: $gold;
    }
  }
}

.detail-container {
  .title {
    @include border-bottom;
    padding: 12px 15px;
    text-align: center;
  }
  .content {
    padding: 15px;
    font-size: $font-size-xs;
    .select-good {
      @include is-flex(row, space-between, center, nowrap);
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

$footerBg: #2b3249;
$footerHeight: 60px;
.foot-height {
  height: calc(100px + #{$footerHeight});
}
.foot {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;

  z-index: 11;
  display: flex;
  flex-direction: row;
  overflow: hidden;

  height: $footerHeight;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
  background: $footerBg;

  .foot-left {
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    .price-box {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      margin-left: 5px;
      .text-price {
        color: $gold;
        font-size: 18px;
      }
    }
  }

  .foot-center {
    display: flex;
    align-items: center;
    font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    transition: all 0.3s;
    background: linear-gradient(180deg, #464e69, #20273d);
    color: $color-primary-title;
    &:active {
      background: linear-gradient(180deg, #414a66, #19213b);
    }
  }

  .foot-right {
    display: flex;
    align-items: center;
    // font-weight: bold;
    padding-left: 15px;
    padding-right: 15px;
    transition: all 0.3s;
    background: linear-gradient(180deg, #ffedcb, #f1c99a);
    color: $color-primary-bg;
    &:active {
      background: linear-gradient(45deg, #ffe5b6, #f3c188);
    }
  }
}
</style>
